import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import styles from './RecommItem.less';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Button,
  Modal,
  Tag,
  message,
  Badge,
  Radio,
  Tree,
  Icon,
} from 'antd';

const FormItem = Form.Item;
const { CheckableTag } = Tag;
const Search = Input.Search;
const RadioGroup = Radio.Group;
const TreeNode = Tree.TreeNode;

@Form.create()
export default class LayoutTypeModal extends PureComponent {
  constructor(props) {
    super(props);
    console.log('初始化数据', this.props.initValue);
  }

  state = {
  };

  _okHandle() {

  }

  render() {
    return (
      <Modal
        // width={800}
        destroyOnClose
        title="添加布局"
        visible={this.props.visible}
        onOk={() => this._okHandle()}
        onCancel={() => this.props.cancel()}
        footer={null}
      >
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex' }}>
            <div className={styles.modalItem} onClick={() => this.props.chooseType(0)}>
              <img src={require('../../assets/padRecomm/pic0.png')} className={styles.modalImg}></img>
              2行2列
            </div>
            <div className={styles.modalItem} onClick={() => this.props.chooseType(1)}>
              <img src={require('../../assets/padRecomm/pic1.png')} className={styles.modalImg}></img>
              2行1列
            </div>
            <div className={styles.modalItem} onClick={() => this.props.chooseType(2)}>
              <img src={require('../../assets/padRecomm/pic2.png')} className={styles.modalImg}></img>
              1+1行1列
            </div>
          </div>

          <div style={{ display: 'flex', marginTop: '10px' }}>
            <div className={styles.modalItem} onClick={() => this.props.chooseType(3)}>
              <img src={require('../../assets/padRecomm/pic3.png')} className={styles.modalImg}></img>
              2行2+2列
            </div>
            <div className={styles.modalItem} onClick={() => this.props.chooseType(4)}>
              <img src={require('../../assets/padRecomm/pic4.png')} className={styles.modalImg}></img>
              2行1+1列
            </div>
            <div className={styles.modalItem} onClick={() => this.props.chooseType(5)}>
              <img src={require('../../assets/padRecomm/pic5.png')} className={styles.modalImg}></img>
              2行2+1列
            </div>
          </div>
        </div>


      </Modal>
    )
  }

}